<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<title>具体文章</title>
<link href="/main/css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="/main/js/jquery.min.js"></script>
<link href="/main/css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="/main/js/bootstrap.js"></script>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'/>
<script src="/main/js/responsiveslides.min.js"></script>
    <link rel="stylesheet" href="/editmd/css/editormd.css" />
    <link rel="stylesheet" href="/editmd/css/editormd.preview.css" />
    <script src="/editmd/lib/marked.min.js"></script>
    <script src="/editmd/lib/prettify.min.js"></script>

    <script src="/editmd/editormd.min.js"></script>

    <script src="/editmd/lib/raphael.min.js"></script>
    <script src="/editmd/lib/underscore.min.js"></script>
    <script src="/editmd/lib/sequence-diagram.min.js"></script>
    <script src="/editmd/lib/flowchart.min.js"></script>
    <script src="/editmd/lib/jquery.flowchart.min.js"></script>

    <link rel="stylesheet" href="/layui/plugins/layui/css/layui.css" media="all" />
    <script src="/layui/plugins/layui/layui.js"></script>
	<script>
		$(function () {
		  $("#slider").responsiveSlides({
			auto: true,
			nav: true,
			speed: 500,
			namespace: "callbacks",
			pager: true,
		  });
		});
	</script>
	<script type="text/javascript" src="/main/js/move-top.js"></script>
	<script src="/main/js/template-web.js"></script>
	<script type="text/javascript" src="/main/js/easing.js"></script>
<!--/script-->
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
				});
			});
</script>
</head>
<body>
<input id="userId" type="hidden" th:value="${session.user}"/>
<input type="hidden" id="ByFocal" th:value="${page.login_name}" />
	<!-- header-section-starts-here -->
<div th:include="/main/index :: navbar"></div>
	<!-- header-section-ends-here -->
	<div class="wrap">

	</div>

	<!-- content-section-starts-here -->
	<div class="main-body">
		<div class="wrap">
			<ol class="breadcrumb">
				<li><a href="/main/index">主页</a></li>
				<li><a href="/main/pageList">文章库</a></li>
				<li class="active" th:text="${page.paper.title}"></li>
			</ol>

			<div class="col-md-8 content-left">
				<!--content 开始-->
				<div class="privacy">
					<h2 th:text="${page.paper.title}" class="head">题目</h2>
                    <input type="hidden" id="paperId" th:value="${page.paper.id}"/>
                    <ul class="actions">
                        <!-- 内容 -->
                        <div id="view" style="width: 700px">
                            <textarea style="display:none;" name="test-editormd-markdown-doc">###Hello world!</textarea>
                        </div>

                        <div id="view2">
                            <textarea id="append-test" style="display:none;" th:text="${page.paper.content}">321</textarea>
                        </div>
                        <!--<li><p th:text="${page.paper.content}"></p></li>-->
                    </ul>
                    <!-- 代码显示 -->
                    <script type="text/javascript">
                        $(function() {
                            var EditormdView, EditormdView2;

                            $.get("test.md", function(markdown) {

                                EditormdView = editormd.markdownToHTML("view", {
                                    markdown        : markdown + "\r\n" + $("#append-test").text(),
                                    //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                                    htmlDecode      : "style,script,iframe",  // you can filter tags decode
                                    //toc             : false,
                                    tocm            : true,    // Using [TOCM]
                                    emoji           : true,
                                    taskList        : true,
                                    tex             : true,  // 默认不解析
                                    flowChart       : true,  // 默认不解析
                                    sequenceDiagram : true,  // 默认不解析
                                });


                            });

                            EditormdView2 = editormd.markdownToHTML("view2", {
                                htmlDecode      : "style,script,iframe",  // you can filter tags decode
                                emoji           : true,
                                taskList        : true,
                                tex             : true,  // 默认不解析
                                flowChart       : true,  // 默认不解析
                                sequenceDiagram : true,  // 默认不解析
                            });
                        });
                    </script>
                    <!-- 显示代码 -->
				</div>
                <input id="markNum" type="hidden" th:value="${page.paper.mark}">
                <button id="shoucang" onclick="addItem()" class="btn btn-primary btn-block" type="submit" th:text="添加到我的收藏" ></button>

                <!--收藏js-->
                <script>
                    function addItem() {
                        var urlPath = window.location.pathname;
                        var pageId = document.getElementById("paperId").value;
                        var userName = document.getElementById("userId").value;
                        if(userName.length == 0){
                            // alert("请先登录！");
                            location.href = '/user/reLogin?url='+urlPath;
                        }else {
                        $.ajax( {
                            type : "post",
                            data:{userName:userName,pageId:pageId},
                            dataType:"json",
                            url : '/main/faves/checkIsFaves',
                            timeout : 20000,
                            cache : false,
                            success : function(data) {
                                if(data.flag == true){
                                    layer.alert("已经添加到收藏中，不必重新收藏！");
                                }
                                else{
                                    $.ajax( {
                                        type : "post",
                                        data:{userName:userName,pageId:pageId},
                                        dataType:"json",
                                        url : '/main/faves/addItem',
                                        timeout : 20000,
                                        cache : false,
                                        success : function(data) {
                                            if(data == 1){
                                                layer.alert("添加收藏成功")
                                            }
                                            else{
                                                layer.alert("出现错误取消失败！")
                                            }
                                        }

                                    });

                                }
                            }

                        });
                        }


                    };
                </script>


                <!--content结束-->



                <div class="latest-articles">
                    <div class="main-title-head">
                        <header>
                            <h3 class="title-head">上下篇推荐</h3>
                        </header>
                    </div>
                    <div class="world-news-grids">
                        <script id="preAndNext"  type="text/html">
                        <div class="world-news-grid">
                            <a href="/main/paper/{{prePaper.id}}" class="title">{{prePaper.title}} </a>
                            <p>{{prePaper.sgement}}</p>
							<a class="reu" href="/main/paper/{{prePaper.id}}"></a>
                        </div>
                        <div class="world-news-grid">
                            <a href="/main/paper/{{nextPaper.id}}" class="title">{{nextPaper.title}} </a>
                            <p>{{nextPaper.sgement}}</p>
                            <a class="reu" href="/main/paper/{{nextPaper.id}}"></a>
                        </div>
                        </script>
                        <script type="text/javascript">
                            var preAndNextItem ='';
                            var paperId = document.getElementById("paperId").value;
                            $(document).ready(function () {
                                var url = '/main/paper/PreAndNextPage/'+paperId;
                                $.ajax( {
                                    type : "post",
                                    dataType:"json",
                                    url : url,
                                    timeout : 20000,
                                    cache : false,
                                    success : function(data) {
                                        preAndNextItem = template('preAndNext', data);
                                        document.getElementById('content').innerHTML = preAndNextItem;
                                    }

                                });
                            })
                        </script>
                        <div id="content"> </div>
                        <div class="clearfix"></div>
                        <!--评论区 开始-->

                        <div class="response">
                            <h4>留言</h4>
                            <div id="ju" class="media response-info" th:each="comment,pageStat :${page.comments}">
                                <div th:if="pageStat.size != 0">
                                <div class="media-left response-text-left">
                                    <a href="#">
                                        <img width="45" height="45" class="media-object" th:src="${page.comments_UserMes[pageStat.index].head}" alt=""/>
                                    </a>
                                    <h5><a th:href="@{/main/personal/'${page.comments_UserMes[pageStat.index].login_name}'}" th:text="${page.comments_UserMes[pageStat.index].login_name}" ></a></h5>
                                </div>
                                <div class="media-body response-text-right">
                                    <p th:text="${comment.comments_content}"></p>
                                    <ul>
                                        <li th:text="${comment.comments_time}">June 21, 2015</li>
                                    </ul>
                                </div>
                                <div class="clearfix"> </div>
                                </div>
                            </div>
                            <div th:if="${page.count} == 0">
                                <p> :( 暂无留言 ):</p>
                            </div>


                        </div>
                        <div class="coment-form">
                            <h4>Leave your comment</h4>
                                <textarea id="comment" placeholder="你的评论..." ></textarea>
                                <input type="submit" onclick="submitBTN()" value="提交评论" />
                        </div>
                        <div class="clearfix"></div>
                        <script>
                            var pageId = document.getElementById("paperId").value;
                            var userName = document.getElementById("userId").value;
                            var urlPath2 = window.location.pathname;

                            function Trim(str)
                            {
                                return str.replace(/(^\s*)|(\s*$)/g, "");
                            }
                            function submitBTN() {
                                var text = document.getElementById('comment').value;
                                // alert(text)
                                if(userName.length == 0){
                                    // alert(userName);
                                    location.href = '/user/reLogin?url='+urlPath2;
                                }else {
                                    $.ajax({
                                        type: "post",
                                        dataType: "json",
                                        url: '/main/comments/insertComment',
                                        data: {userName: userName, pageId: pageId, text: text},
                                        timeout: 20000,
                                        cache: false,
                                        success: function (data) {
                                            if (data === 1) {
                                                window.location.reload();
                                                location.href = "/main/paper/" + pageId ;
                                            }


                                        }
                                    })
                                }
                            }
                        </script>
                        <!--评论区 结束-->
                        <div class="clearfix"></div>
                    </div>
                </div>

            </div>



            </div>

			<div class="col-md-4 side-bar">
			<div class="first_half">
				<div class="newsletter">
					<h1 class="side-title-head">作者信息</h1>

                    <img id="img" th:src="${page.head}" th:width="80px" height="80px" />
                    昵称: <a th:text="${page.login_name}"></a>
                    <p>&nbsp;</p>
                    <script type="text/html" id="friend_content">
                        <a th:text="${session.user}"></a> <a th:text="${page.login_name}"></a>
                        <div th:if="${session.user} != null">
                            <div id="check" th:if="${session.user}!=${page.login_name}">
                                {{if flag}}
                                <input type="submit" id="cancelFocal"  value="取消关注" onclick="cancel()"></input>
                                {{/if}}
                                {{if !flag}}
                                <input type="submit" id="addFocal"  value="添加关注" onclick="add()"></input>
                                {{/if}}
                            </div>
                        </div>
                    </script>
                    <div th:if="${session.user} == null">
                        <input type="submit" id="addFocal2"  value="登录后添加关注" onclick="add()"></input>
                    </div>
                    <script type="text/javascript">
                        var friend ='';
                        $(document).ready(function () {
                            var ByFocal = document.getElementById("ByFocal").value;
                            var userId = document.getElementById("userId").value;
                            $.ajax( {
                                type : "post",
                                data:{userId:userId,friendId:ByFocal},
                                dataType:"json",
                                url : '/main/user/checkFriends',
                                timeout : 20000,
                                cache : false,
                                success : function(data) {
                                    friend = template('friend_content', data);
                                    // alert(data.flag)
                                    document.getElementById('friend').innerHTML = friend;
                                }

                            });
                        });
                        layui.use(['laypage', 'layer', 'table', 'element'], function() {
                            layer = layui.layer;//弹层


                        });

                        function cancel() {
                            // 取消关注
                            var ByFocal = document.getElementById("ByFocal").value;
                            var userId = document.getElementById("userId").value;

                            $.ajax( {
                                type : "post",
                                data:{userId:userId,friendId:ByFocal},
                                dataType:"json",
                                url : '/main/user/deleteFriends',
                                timeout : 20000,
                                cache : false,
                                success : function(data) {
                                    if(data == 1){
                                        layer.alert("取消关注成功！");
                                        setTimeout(function () {
                                            window.location.reload()
                                        },1500)
//
                                    }
                                    else{
                                        layer.alert("出现错误取消失败！")
                                    }
                                }

                            });

                        };

                        function add() {
                            //添加关注
                            var ByFocal = document.getElementById("ByFocal").value;
                            var userId = document.getElementById("userId").value;
                            var urlPath = window.location.pathname;
                            if(userId.length == 0){
                                // layer.alert("请先登录！");
                                location.href = '/user/reLogin?url='+urlPath;
							}else{
                            $.ajax( {
                                type : "post",
                                data:{userId:userId,friendId:ByFocal},
                                dataType:"json",
                                url : '/main/user/addFriends',
                                timeout : 20000,
                                cache : false,
                                success : function(data) {
                                    if(data == 1){
                                        layer.alert("添加成功！");
                                        setTimeout(function () {
                                            window.location.reload()
                                        },1500)
                                    }
                                    else{
                                        layer.alert("出现错误添加失败！")
                                    }
                                }

                            });
                            }

                        }

                    </script>

                    <p id="friend"></p>

				</div>
				<div class="list_vertical">
		        <section class="accordation_menu">
						</section>
					 </div>
					 </div>
					 <div class="secound_half">
                         <!--标签栏 全部标签 限量20-->
                         <div th:include="/main/index :: tags"></div>
                         <!--标签栏结束-->


                         <!--popular-news 开始-->
                         <div th:include="/main/index :: popular-news"></div>
                         <!--popular-news 结束-->
					</div>
					<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- content-section-ends-here -->

	<!-- footer-section-starts-here -->
<div th:include="/main/index :: footer-section"></div>
	<!-- footer-section-ends-here -->
	<script type="text/javascript">
		$(document).ready(function() {

		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!----></div>
</body>
</html>
